<html>

<head>
    <title>
        {{ $t('Label.AddonBox') }}
    </title>
    <meta charset="utf-8" />
</head>

<body>
    <nav-bar :query.sync="query" :is-show-about.sync="isShowAbout" :is-show-setting.sync="isShowSetting"></nav-bar>
    <div class="container-fluid" style="margin-top: 105px; width: 95%;">
        <div class="row">
            <addon-list :columns="columns" :query="query" :addons="addons"></addon-list>
        </div>
    </div>
    <footer class="footer">
        <div class="row">
            <div class="col-xs-10">
                <div class="progress">
                    <progressbar :now="progress" label striped animated></progressbar>
                </div>
                <p>{{ status }}</p>
            </div>
            <div class="col-xs-2">
                <button style="font-size: 24px;" :disabled="!isReadyToUpdate" class="btn btn-lg btn-success" @click="update()">
                    {{ labelBtnUpdate }}
                </button>
            </div>
        </div>
    </footer>
    <alert :show.sync="alerter.show" :duration="3000" :type="alerter.style" width="300px" placement="top-right" dismissable>
        <span class="icon-info-circled alert-icon-float-left"></span>
        <strong>{{ alerter.title }}</strong>
        <p>{{ alerter.content }}</p>
    </alert>
    <modal-about :show.sync="isShowAbout"></modal-about>
    <modal-setting :show.sync="isShowSetting" :worker-count.sync="workerCount" :auto-update.sync="autoUpdate" :wow-path.sync="wowPath">
    </modal-setting>
</body>

</html>
